class Cart{
    constructor() {
        //获取元素
        this.cartTable = document.querySelector('.cartTable')
        this.tbody = document.querySelector('tbody')
        this.totalNum = document.querySelector('.total-left>.num>span')
        this.money = document.querySelector('.money>span')
        this.selectAll = document.querySelector('.selectAll')
        //获取数据
        this.data = JSON.parse(localStorage.getItem('cart')) || []
        //调用init方法
        this.init()
    }
    init(){
        this.render()
        this.bindHtml()
        this.total()
    }
    //根据数据渲染页面
    render() {
        this.tbody.innerHTML = ''
        //思考：列表页面如果添加了商品，购物车里面就有数据，如果没有添加就没有数据
        if (!this.data.length) {
            //如果没有数据就进入这里，给用户一个提示
            this.tbody.innerHTML = `
               <tr height="300">
                 <td colspan="6">  
                    <h1>您的购物车还是空的！<a href="http://127.0.0.1:2113/index.html">去挑好物吧~</a></h1>
                 </td>
               </tr>
            `
        } else {
            this.data.forEach(item => {
                this.tbody.innerHTML += `
                <tr>
                    <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}/></td>
                    <td>
                        <img src="${item.img_small_logo}">
                        <span class="hide">${item.title}</span>
                    </td>
                    <td><span class="price">${item.price}</span></td>
                    <td>
                        <span class="sub" data-id="${item.goods_id}">-</span>
                        <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}" />
                        <span class="add" data-id="${item.goods_id}">+</span>
                    </td>
                    <td><span class="subTotal">${item.cart_number * item.price}元</span></td>
                    <td><span class="del" data-id="${item.goods_id}">删除</span></td>
                </tr>
                `
            })
        }
        //数据持久化
        localStorage.setItem('cart', JSON.stringify(this.data))
    }
    //给html绑定各种事件
    bindHtml() {
        //做事件委派
        this.cartTable.addEventListener('click', (e) => {
            //事件对象兼容写法
            e = e || window.event
            //事件（目标事件）源兼容写法
            let target = e.target || e.srcElement
            //做全选功能
            if (target.className == 'selectAll') {
                console.log(this.data)
                //获取全选按钮的状态
                let type = target.checked
                //当咱们点击全选按钮的时候，让所有的单选按钮选中或未选中
                //思路：使用数据驱动页面，修改的是数组
                this.data.forEach(item => {
                    item.is_select = type
                })
                //当咱们把数据修改了应该重新渲染页面
                this.render()
                this.total()
            }
            //单选功能
            //注意点：在服务器环境下，很多的数据会进行缓存，所以当有时候有些数据会从浏览器缓存里面获取，会导致代码出错
            if (target.className == 'select') {
                let id = target.dataset.id - 0
                let goods = this.data.find(item => { return item.goods_id == id })
                //改变选中状态
                goods.is_select = !goods.is_select
                //渲染页面
                this.render()
                this.total()
            }
            //点击数量增加
            if (target.className == 'add') {
                let id = target.dataset.id - 0
                let goods = this.data.find(item => { return item.goods_id == id })
                if (goods.cart_number == goods.goods_number) {
                    alert('亲，只能买这么多!')
                    return false
                }
                goods.cart_number ++
                //渲染页面
                this.render()
                this.total()
            }
            //点击数量减少
            if (target.className == 'sub') {
                let id = target.dataset.id - 0
                let goods = this.data.find(item => { return item.goods_id == id })
                if (goods.cart_number == 1) {
                    return false
                }
                goods.cart_number--
                //渲染页面
                this.render()
                this.total()
            }
            //删除操作
            if (target.className == 'del') {
                let id = target.dataset.id - 0
                //注意点：返回的是在数组里面的位置
                let index = this.data.findIndex(item => { return item.goods_id == id })
                this.data.splice(index, 1)
                //如果数组是空的，把全选框的状态改为false
                if (!this.data.length) {
                    this.selectAll.checked = false
                }
                //渲染页面
                this.render()
                this.total()
            }
            //清空购物车
            if (target.className == 'dlAll') {
                //如果都是true的状态说明都是选中的，把你给过滤掉，只剩下状态是false的重新赋值
                let res = this.data.filter(item => { return item.is_select == false })
                this.data = res
                //如果数组是空的，把全选框的状态改为false
                if (!this.data.length) {
                    this.selectAll.checked = false
                }
                //渲染页面
                this.render()
                this.total()
            }
        }, false)
    }

    
    //计算总价和数量
    total() {
        //使用两个变量保存总的数量和总价格
        let num = 0
        let money = 0
        //遍历数组
        this.data.forEach(item => {
            //当单选按钮是选中状态的时候应该计算
            if (item.is_select == true) {
                num += item.cart_number
                money += item.cart_number * item.price
                //当咱们单选框是选中的状态进行判断全选框是否选中
                let res = this.data.every(item => { return item.is_select == true })
                if (res) {
                    this.selectAll.checked = true
                } else {
                    this.selectAll.checked = false
                }
            }
        })
        //进行赋值操作
        this.totalNum.innerHTML = num
        this.money.innerHTML = money
    }
}
new Cart()